<!--我卖出的宠物-我的发布-我发布的宠物 -->
<template>
  <div class="order-box">
    <div class="order-table">
      <el-table :data="currentPageData" border style="width: 100%">
        <el-table-column prop="petName" label="宠物名字" />
        <el-table-column prop="deposit" label="押金" />
        <el-table-column prop="adopterAddress" label="领养人地址" />
        <el-table-column label="订单状态">
          <template #default="{ row }">
            <el-tag :type="getOrderStatusType(row.orderStatus)" :style="getTagStyle(row.orderStatus)" plain
              disable-transitions>
              {{ row.orderStatus }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="创建订单时间">
          <template #default="{ row }">
            {{ new Date(row.createTime).toISOString().slice(0, 16).replace('T', ' ') }}
          </template>
        </el-table-column>

        <!-- 操作列 -->
        <el-table-column label="操作" min-width="100px">
          <template #default="scope">
            <el-button type="primary" plain size="small" @click="handleSend(scope.row); dialogFormVisible = true;"
            :disabled="scope.row.orderStatus !== '未发货'"
            >
              发货
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <div class="pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[12]" :page-size="pageSize" layout="prev, pager, next" :total="total" />
      </div>
    </div>
  </div>

  <!-- 编辑表单 -->
  <el-dialog v-model="dialogFormVisible" title="请解决争议订单" width="500">

    <!-- 只读 -->
    <el-form-item label="订单ID" :label-width="formLabelWidth">
      <el-input v-model="form.orderId" disabled placeholder="系统自动填充" />
    </el-form-item>

    <el-form :model="form">
      <el-form-item label="物流编号" :label-width="formLabelWidth">
        <el-input v-model="form.deliveryNum" autocomplete="off" />
      </el-form-item>

    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="resetUpload(); dialogFormVisible = false;">取消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false; ConfirmBtn()">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { getUserPublishPetListAPI,putSendAPI } from "@/api/user"
import { useUserStore } from "@/stores/user"
import { onMounted, ref, computed,reactive } from "vue"
import { ElMessage } from 'element-plus'

const userStore = useUserStore()
const userId = userStore.user.user_id

console.log("用户ID:", userId)
// 获取并且存储
const OrderData = ref([])
const total = ref(0) // 总数据量
const currentPage = ref(1) // 当前页码
const pageSize = ref(12) // 每页显示数量

const getUserPublishPetList = async () => {
  const res = await getUserPublishPetListAPI(userId)
  OrderData.value = res.data.items
  total.value = res.data.items.length
  console.log(OrderData.value)
}

onMounted(() => {
  getUserPublishPetList()
})

// 计算当前页数据
const currentPageData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  return OrderData.value.slice(start, start + pageSize.value)
})



// 定义颜色状态  
const getOrderStatusType = (status) => {
  switch (status) {
    case '申请中':
      return 'primary'
    case '已取消':
      return 'info'
    case '申请失败':
      return 'danger'
    case '未发货':
      return 'warning'
    case '已发货':
      return 'default' // 类型保持默认  
    case '已完成':
      return 'success'
    default:
      return 'default'
  }
}

const getTagStyle = (status) => {
  if (status === '已发货') {
    return { backgroundColor: '#bbe4de', color: '#fff' }
  }
  return {} // 其他状态无特殊样式  
}

// 分页器事件处理
const handleSizeChange = (newSize) => {
  pageSize.value = newSize
  currentPage.value = 1 // 切换每页数量后回到第一页
  getUserPublishPetList() // 重新获取数据
}

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage
}

const formLabelWidth = '180px'//输入框标题宽度
const dialogFormVisible = ref(false)
// 表单数据存储
const form = reactive({
    orderId: "",//发货订单ID
    deliveryNum: "",//物流编号
})

const resetUpload = () => {
    form.orderId = "",
    form.deliveryNum = ""
}
// 发货按钮
const handleSend = (row) => {
    // console.log("待发货的ID:", row.id)
    form.orderId = row.id
}

// 确认发货-调用发货接口
const ConfirmBtn = async () => {
    // console.log("确认发货,表单数据：", form)

    // 物流编号不能为空
    if (form.deliveryNum) {
        // 调用发货接口
        const res = await putSendAPI(form.orderId, form.deliveryNum)
        console.log(res)
        if (res.message === "成功") {
            ElMessage.success("发货成功");
        } else {
            ElMessage.error("发货失败");
        }
    } else {
        ElMessage.warning("物流编号不能为空");
    }

}
</script>

<style lang="scss" scoped>
.order-box {
  width: 970px;
  margin-left: 30px;
  // border: 1px solid black;
  padding: 15px;
  position: relative;
  background: #FAFAFA;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
  padding: 10px;
  position: absolute;
}
</style>